<template>
	<view class="app">
		<view class="header_nav">
			<view class="header_nav_item" @click="changeNav(0)"><text class="header_nav_item_text" :class="index == 0 ? 'selector' : ''">未使用</text></view>
			<view class="header_nav_item" @click="changeNav(1)"><text class="header_nav_item_text" :class="index == 1 ? 'selector' : ''">已使用</text></view>
			<view class="header_nav_item" @click="changeNav(2)"><text class="header_nav_item_text" :class="index == 2 ? 'selector' : ''">已过期</text></view>
		</view>
		<view class="main">
			<block v-if="index == 0">
				<view class="box" v-for="(item,indexs) in juanList" @click="goCreate(item)">
					<view class="boxOne">
						<view class="left">
							<view class="">
								￥
								<text>{{item.couponDO.discount}}</text>
							</view>
							<view class="bet">满{{item.couponDO.min}}元可用</view>
						</view>
						<view class="right">
							<view class="">{{item.couponDO.title}}</view>
							<view class="bne">{{dateToString(item.gmtStart)}}-{{dateToString(item.gmtEnd)}}</view>
						</view>
					</view>
					<view class="bomm">
						
						<view class="le" @click="showBox(indexs)">
							使用规则
							<image :src="item.show==true?'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/09a3c2fbc69b489495e8503cbbba3e72.png':'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/120e87dd2be84eb3802936035576c535.png'" mode=""></image>
						</view>
						<view class="ri" @click="goIndex">去使用</view>
					</view>
					<view class="bott" v-if="item.show">
						<!-- <view class="">1、秒杀商品和万人团购商品不可使用</view> -->
						<view class="">1、仅限新鲜蔬菜、时令水果、肉禽蛋品、海鲜水产等类商品使用</view>
						<view class="">2、仅限徐州市区仓满减使用</view>
						<image v-show="index==1" src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/181550803ede4927b77ff22e80745fec.png" mode=""></image>
						<image v-show="index==2" src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/ac41184bea8d4f2cad21cd48b7a9d40f.png" mode=""></image>
					</view>
				</view>
				<!-- <view @click="useCou" class="main_item" v-for="(item,i) in list " :key="i" >
					<view class="main_item_l flex align-center justify-center"> -->
				<!-- <view class="money">￥<text>{{item.couponDO.discount}}</text> </view>
						<view class="mj">满{{item.couponDO.min}}元可用</view> -->
				<!-- 		<view class="text-white text-df">抢购券</view>
					</view>
					<view class="main_item_r">
						<view class="item_r_t">
							<text class="txt1">{{item.couponDO.title}}</text>
							<text class="txt2">点击使用</text>
						</view>
						<view class="item_r_b">{{dateToString(item.gmtStart)}} - {{dateToString(item.gmtEnd)}}有效</view>
					</view>
				</view> -->
			</block>
			<block v-if="index == 1">
				<view class="box" v-for="(item,indexs) in juanList">
					<view class="boxOne">
						<view class="left">
							<view class="">
								￥
								<text>{{item.couponDO.discount}}</text>
							</view>
							<view class="bet">满{{item.couponDO.min}}元可用</view>
						</view>
						<view class="right">
							<view class="">{{item.couponDO.title}}</view>
							<view class="bne">{{dateToString(item.gmtStart)}}-{{dateToString(item.gmtEnd)}}</view>
						</view>
					</view>
					<view class="bomm">
						
						<view class="le" @click="showBox(indexs)">
							使用规则
							<image :src="item.show==true?'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/09a3c2fbc69b489495e8503cbbba3e72.png':'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/120e87dd2be84eb3802936035576c535.png'" mode=""></image>
						</view>
						<!-- <view class="ri">去使用</view> -->
					</view>
					<view class="bott" v-if="item.show">
						<!-- <view class="">1、秒杀商品和万人团购商品不可使用</view> -->
						<view class="">1、仅限新鲜蔬菜、时令水果、肉禽蛋品、海鲜水产等类商品使用</view>
						<view class="">2、仅限徐州市区仓满减使用</view>
						<image v-show="index==1" src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/181550803ede4927b77ff22e80745fec.png" mode=""></image>
						<image v-show="index==2" src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/ac41184bea8d4f2cad21cd48b7a9d40f.png" mode=""></image>
					</view>
				</view>
				<!-- <view @click="useCou" class="main_item" v-for="(item,i) in list " :key="i" >
					<view class="main_item_l flex align-center justify-center"> -->
				<!-- <view class="money">￥<text>{{item.couponDO.discount}}</text> </view>
						<view class="mj">满{{item.couponDO.min}}元可用</view> -->
				<!-- 		<view class="text-white text-df">抢购券</view>
					</view>
					<view class="main_item_r">
						<view class="item_r_t">
							<text class="txt1">{{item.couponDO.title}}</text>
							<text class="txt2">点击使用</text>
						</view>
						<view class="item_r_b">{{dateToString(item.gmtStart)}} - {{dateToString(item.gmtEnd)}}有效</view>
					</view>
				</view> -->
			</block>
		<block v-if="index == 2">
			<view class="box" v-for="(item,indexs) in juanList">
				<view class="boxOne">
					<view class="left">
						<view class="">
							￥
							<text>{{item.couponDO.discount}}</text>
						</view>
						<view class="bet">满{{item.couponDO.min}}元可用</view>
					</view>
					<view class="right">
						<view class="">{{item.couponDO.title}}</view>
						<view class="bne">{{dateToString(item.gmtStart)}}-{{dateToString(item.gmtEnd)}}</view>
					</view>
				</view>
				<view class="bomm">
					
					<view class="le" @click="showBox(indexs)">
						使用规则
						<image :src="item.show==true?'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/09a3c2fbc69b489495e8503cbbba3e72.png':'https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/120e87dd2be84eb3802936035576c535.png'" mode=""></image>
					</view>
					<!-- <view class="ri"></view> -->
				</view>
				<view class="bott" v-if="item.show">
					<!-- <view class="">1、秒杀商品和万人团购商品不可使用</view> -->
					<view class="">1、仅限新鲜蔬菜、时令水果、肉禽蛋品、海鲜水产等类商品使用</view>
					<view class="">2、仅限徐州市区仓满减使用</view>
					<image v-show="index==1" src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/181550803ede4927b77ff22e80745fec.png" mode=""></image>
					<image v-show="index==2" src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/ac41184bea8d4f2cad21cd48b7a9d40f.png" mode=""></image>
				</view>
			</view>
			<!-- <view @click="useCou" class="main_item" v-for="(item,i) in list " :key="i" >
				<view class="main_item_l flex align-center justify-center"> -->
			<!-- <view class="money">￥<text>{{item.couponDO.discount}}</text> </view>
					<view class="mj">满{{item.couponDO.min}}元可用</view> -->
			<!-- 		<view class="text-white text-df">抢购券</view>
				</view>
				<view class="main_item_r">
					<view class="item_r_t">
						<text class="txt1">{{item.couponDO.title}}</text>
						<text class="txt2">点击使用</text>
					</view>
					<view class="item_r_b">{{dateToString(item.gmtStart)}} - {{dateToString(item.gmtEnd)}}有效</view>
				</view>
			</view> -->
		</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type:'',
			index: 0,
			list: [],
			juanList:[{
				show:false
			},
			{
				show:false
			},
			{
				show:false
			}]
		};
	},
	mounted() {
		this.showAll(0);
	},
	onLoad(e) {
		console.log(e,33333);
		this.type=e.type
	},
	methods: {
		goIndex(){
			uni.switchTab({
				url:'../index/index'
			})
		},
		goCreate(e){
			if(this.type>0){
				if(this.type>=e.couponDO.min){
					uni.setStorageSync('youhui',e)
					uni.navigateBack()
				}else{
					uni.showToast({
						title:'当前优惠卷不可用',
						icon:'none'
					})
				}
				
				
				// uni.navigateTo({
						
				// 	url:'../order/create'
				// })
			}
		},
		dateToString(dates){
			var date = new Date(dates);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
		    var year = date.getFullYear();
			console.log(year)
		    var month =(date.getMonth() + 1).toString();
		    var day = (date.getDate()).toString();
		    if (month.length == 1) {
		        month = "0" + month;
		    }
		    if (day.length == 1) {
		        day = "0" + day;
		    }
		    var hours = date.getHours().toString();
		    if(hours.length == 1){
		        hours = "0" + hours;
		    }
		    var mintus = date.getMinutes().toString();
		    if(mintus.length == 1){
		        mintus = "0" + mintus;
		    }
		    var second = date.getSeconds().toString();
		    if(second.length == 1){
		        second = "0" + second;
		    }
		
		    var dateTime = month + "月" + day + '日' 
		    return dateTime;
		},
		showAll(e) {
			let that = this;
			that.$api
				.request('coupon', 'getUserCoupons', { couponType: 1, status: e + 1 }, failres => {
					that.logining = false;
					that.$api.msg(failres.errmsg);
				})
				.then(res => {
					this.juanList = res.data;
					this.juanList.forEach(item=>{
						item.show=false
					})
					console.log(this.juanList);
				});
		},
		dateToString(dates) {
			var date = new Date(dates); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear();
			console.log(year);
			var month = (date.getMonth() + 1).toString();
			var day = date.getDate().toString();
			if (month.length == 1) {
				month = '0' + month;
			}
			if (day.length == 1) {
				day = '0' + day;
			}
			var hours = date.getHours().toString();
			if (hours.length == 1) {
				hours = '0' + hours;
			}
			var mintus = date.getMinutes().toString();
			if (mintus.length == 1) {
				mintus = '0' + mintus;
			}
			var second = date.getSeconds().toString();
			if (second.length == 1) {
				second = '0' + second;
			}

			var dateTime = month + '月' + day + '日';
			return dateTime;
		},
		changeNav(index) {
			this.index = index;
			this.showAll(index);
		},
		useCou() {
			uni.navigateTo({
				url: '/pagesA/parity/PanicbuyingLIst'
			});
		},
		showBox(index){
			let c
			if(this.juanList[index].show==true){
				c=this.juanList[index]
				
				c.show=false
				
			}else{
				c=this.juanList[index]
				// console.log(c);
				c.show=true
			}
			
			this.$set(this.juanList,index,c)
		}
	}
};
</script>

<style scoped lang="scss">
pages,
.app {
	min-height: 100vh;
	background-color: #f6f5fa;
}
.header_nav {
	display: flex;
	flex-direction: row;
	height: 80rpx;
	background-color: #ffffff;
	margin-bottom: 70rpx;
}
.header_nav_item {
	flex: 1;
	height: 80rpx;
	text-align: center;
}
.header_nav_item_text {
	display: inline-block;
	height: 80rpx;
	width: 150rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 28rpx;
	color: #666666;
}
.selector {
	color: #2aab34;
	border-bottom: 4rpx solid #2aab34;
}
.main {
	width: 710rpx;
	/* padding-top: 21rpx; */
	margin: 0 auto;
}
.main_item {
	margin-top: 21rpx;
	height: 120rpx;
	border-radius: 20rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
}
.main_item_l {
	height: 120rpx;
	width: 170rpx;
	background-image: url(../../static/user/conpus1.png);
	background-repeat: no-repeat;
	background-size: 170rpx 120rpx;
}
.mt1 {
	background-image: url(../../static/user/conpus2.png);
}
.mt2 {
	background-image: url(../../static/user/conpus3.png);
}
.main_item_r {
	height: 120rpx;
	width: 540rpx;
}
.money {
	text-align: center;
	color: #ffffff;
	font-size: 24rpx;
	height: 72rpx;
	line-height: 80rpx;
}
.money text {
	font-size: 56rpx;
}
.mj {
	height: 48rpx;
	text-align: center;
	font-size: 20rpx;
	color: #ffffff;
	line-height: 48rpx;
}
.item_r_t,
.item_r_b {
	height: 60rpx;
	position: relative;
}
.txt1 {
	font-size: 32rpx;
	color: #1b1c33;
	position: absolute;
	top: 20rpx;
	left: 30rpx;
}
.txt2 {
	position: absolute;
	color: #2aab34;
	font-size: 24rpx;
	display: inline-block;
	width: 120rpx;
	height: 40rpx;
	text-align: center;
	line-height: 40rpx;
	border: 1rpx solid #2aab34;
	border-radius: 20rpx;
	top: 20rpx;
	right: 20rpx;
}
.item_r_b {
	height: 48rpx;
}
.item_r_b {
	padding-left: 30rpx;
	color: #8e8e9a;
	font-size: 24rpx;
	padding-top: 12rpx;
}
.cor1 {
	color: #8e8e9a;
}
.cor2 {
	color: #c4c4cc;
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	font-size: 24rpx;
}
.box {
	/* height: 400rpx; */
	width: 90%;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 16rpx;
	margin-bottom: 20rpx;
	.boxOne {
		height: 180rpx;
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #f2f2f2;
		.left {
			font-size: 32rpx;
			color: #36b542;
			margin-right: 64rpx;
			text {
				font-size: 72rpx;
				// font-family: PingFangSC-Medium, PingFang SC;
				// font-weight: 500;
				color: #36b542;
			}
			.bet {
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #36b542;
			}
		}
		.right {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #36b542;
			.bne {
				font-size: 20rpx;
				margin-top: 16rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
		}
	}
	.bomm {
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		box-sizing: border-box;
		.le {
			box-sizing: border-box;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #36b542;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 20rpx;
			}
		}
		.ri {
			width: 100rpx;
			height: 32rpx;
			border-radius: 999rpx;
			background-color: #36b542;
			color: #ffffff;
			font-size: 24rpx;
			text-align: center;
			line-height: 32rpx;
		}
	}
	.bott{
		padding: 0 32rpx;
		box-sizing: border-box;
		height: 150rpx;
		width: 100%;
		position: relative;
		font-weight: 300;
		color: #666666;
		font-size: 20rpx;
		line-height: 28rpx;
		image{
			width: 170rpx;
			height: 170rpx;
			position: absolute;
			bottom: -20rpx;
			right: 0;
			opacity: 0.7;
		}
	}
}
</style>
